<template>
  <el-card shadow="never" class="layout">
    <el-form ref="formRef" :model="gather" :inline="true" class="searchForm">
      <div class="timer">
        <el-form-item label="时间筛选" class="selectTime first_item">
          <div class="selectTime_btn">
            <el-button size="small" :plain="gather.time_type == '1'" class="selectTime_btn_item" @click="selectTime('1')">今日</el-button>
            <el-button size="small" :plain="gather.time_type == '2'" @click="selectTime('2')">本周</el-button>
            <el-button size="small" :plain="gather.time_type == '3'" @click="selectTime('3')">本月</el-button>
            <el-button size="small" :plain="gather.time_type == '4'" @click="selectTime('4')">自定义</el-button>
          </div>
        </el-form-item>
        <el-form-item v-show="gather.time_type == '4'" prop="filter_time">
          <div class="filter_time">
            <el-date-picker
              :disabledDate="disabledDate"
              format="YYYY-MM-DD HH:mm:ss"
              @calendar-change="handleChange"
              @focus="handleFocus"
              value-format="YYYY-MM-DD HH:mm:ss"
              class="date_pick"
              size="small"
              v-model="gather.filter_time"
              :default-time="defaultTime"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束时间"
            />
          </div>
        </el-form-item>
      </div>
      <div>
        <el-form-item>
          <el-button size="small" type="primary" @click="searchApi">查询</el-button>
          <el-button size="small" @click="resetForm">清空</el-button>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { getDay ,timeSlotChange} from '@/utils/utils'
  const emit = defineEmits(['submit'])

  const pickDay = ref()
  const formRef = ref()
  const impose = ref(180)
  const defaultTime = reactive([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])

  const gather = reactive({
    time_type: '',
    filter_time: []
  })
  // 选择最近时间
  const selectTime = (val: string) => {
    gather.time_type = val
    switch (val) {
      case '1':
        gather.filter_time = [getDay(0), getDay(0, true)]
        break
      case '2':
        gather.filter_time = timeSlotChange('本周')
        break
      case '3':
        gather.filter_time =timeSlotChange('本月')
        break
      case '4':
        gather.filter_time = []
        break
    }
    if (val !== '4') emit('submit', gather)
  }
  selectTime('2')
  const handleChange = (val: Date[]) => {
    if (impose.value) {
      const [pointDay] = val
      pickDay.value = pointDay
    }
  }
  const handleFocus = () => {
    pickDay.value = null
  }
  const disabledDate = (time: number) => {
    if (!pickDay.value) {
      return false
    }
    if (impose.value) {
      const con1 = new Date(pickDay.value).getTime() - impose.value * 24 * 60 * 60 * 1000
      const con2 = new Date(pickDay.value).getTime() + impose.value * 24 * 60 * 60 * 1000
      return time < con1 || time > con2
    }
    return false
  }
  const searchApi = () => {
    emit('submit', gather)
  }
  const resetForm = () => {
    if (!formRef.value) return
    formRef.value.resetFields()
    gather.time_type = '2'
    emit('submit', gather)
  }
  defineExpose({
    searchApi
  })
  // searchApi()
</script>

<style lang="scss" scoped>
  .layout {
    margin-top: 16px;
    :deep(.el-card__body) {
      padding: 18px 24px 16px;
      .searchForm {
        display: flex;
        align-items: center;
        background: #fff;
        justify-content: space-between;
        .timer {
          display: flex;
          align-items: center;
          .first_item {
            :deep(.el-form-item__label) {
              margin-top: -5px;
            }
          }
          .selectTime {
            .selectTime_btn {
              display: flex;
              align-items: center;
              &_item {
                padding: 0 17px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #eaeaea;
                cursor: pointer;
                box-sizing: border-box;
              }
              .active {
                border: 1px solid #ff6b00;
                color: #ff6b00;
              }
            }
          }
          .filter_time {
            margin-top: 4px;
            max-width: 285px;
            :deep(.date_pick) {
              width: 285px;
            }
          }
        }
        .el-form-item {
          margin-bottom: 0px;
          display: flex;
          align-items: center;
        }

        .form_item_input {
          .el-input__inner {
            width: 100px;
          }
        }
      }
    }
  }
</style>
